<template>
  <!-- 单选题页面 -->
 <view>
   <view class="" v-if="subject">
     <view class="title">
       当前第{{current}}题/共{{total}}题
     </view>
     <progress color="#ffcc33" :percent="percent" stroke-width="8" border-radius="30" />
     <view class="topic">
       题目：{{subject.title}}
     </view>
     <radio-group name="" @change="radioChange">
       <view class="test" v-for="(item,index) of subject.options" :key="index">
         <radio  color="#FFCC33" :value="item.code" />
         <text>{{item.code}}:{{item.option}}</text>
       </view>
     </radio-group>
     <button size="default" type="primary" @click="submit">
       {{!isMit ? '下一题' : '提交答案'}}
     </button>
     <view v-if="totalScore>-1" class="totalScore">
       本次答题得分：{{totalScore}}
     </view>
     <view @click="seeErr" v-if="totalScore>-1" class="totalErr">
       <text v-if="totalErr>0">
         本次错题：{{totalErr >5 ? 5 : totalErr}}
       </text>
     </view>
   </view>
   
   <view v-if="!subject" class="abc">
     正在加载题库...
   </view>
 </view>
</template>

<script>
  export default {
    data() {
      return {
        isDisa: '',
        subject: [],
        errorOptions: [], //错题集
        totalErr: '', //用户错题
        current: 1,
        // isSelect:false,
        total: 0,
        select: [],
        Eoptions: [],
        userSelect: '',
        percent: 0,
        isMit: null,
        isCheck: false,
        subjectNow: '',
        userScore: 0, //用户得分
        totalScore: -1, //用户总得分
        titles: [],
        fake:[]

      }
    },
    methods: {
      radioChange(e) {
        // 获取用户选项
        this.userSelect = e.detail.value
      },
      // 提交答题并进行下一题
      submit() {
        // 判断是否提交答题
        if (this.current == this.total - 1) {
          this.isMit = true
        }

        // 判断是否全部选择答案
        if (this.current == this.titles.length) {
          if (!this.userSelect) {
            uni.showToast({
              icon: 'error',
              title: '有未选择题目'
            })
            return
          }
          // 提交按钮禁用
          if (this.userSelect) {
            this.isDisa = true
          }
        }
        let num = this.current + 1
        // 更新进度条
        this.percent = ((num - 1) / this.titles.length * 100).toFixed(2)
        // 判断用户是否答对
        // console.log('用户选项', this.userSelect)
        // console.log('正确答案', this.subject.answer)
        if (this.subject.answer.indexOf(this.userSelect) > -1) {
          this.userScore = this.userScore + 1
        } else {
          // 记录用户打错的题
          this.subjectNow = this.subject
          this.subjectNow.userSelect = this.userSelect
          // console.log('错题', this.subjectNow);
          this.errorOptions.push(this.subjectNow)
        }
        // 答完题的时候 对用户进行打分

        if (num > this.titles.length) {
          this.totalScore = (this.userScore / this.titles.length * 100).toFixed(2)
          // console.log('用户总得分', this.totalScore)
          // console.log('用户错题集', this.errorOptions)
          this.totalErr = this.errorOptions.length
          uni.showToast({
            icon: 'none',
            title: '已经是最后一道啦'
          })
          return
        }
        this.current = num
        this.subject = this.titles[num - 1]
        // this.isSelect = false

        this.userSelect = ''
      },
      // 查看错题集
      seeErr() {
        let Eoptions = this.errorOptions
        uni.setStorageSync('only', Eoptions)
        uni.reLaunch({
          url: '/pages/errOptions/errOptions',
        })
      },
      getRandomItems(arr, num) {
        let shuffled = arr.slice().sort(() => 0.5 - Math.random()); // 打乱数组
        return shuffled.slice(0, num); // 返回前num个元素
      }
    },
    onLoad() {
      this.subject = this.titles[this.current - 1],
      this.total = this.titles.length
      uniCloud.callFunction({
        name:"demo",
        data:{}
      }).then(res=>{
        // console.log(res.result.data);
        this.fake = res.result.data
        this.titles = this.getRandomItems(this.fake,5)
        this.subject = this.titles[0]
        this.total = this.titles.length
      })
    }
  }
</script>

<style lang="scss" scoped>
  .abc{
    margin-top: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    text-align: center;
    color: #ffcc66;
    font-size: 32rpx;
    margin: 15rpx;
  }

  .topic {
    margin: 20rpx;
  }

  progress {
    margin: 10rpx;
  }

  .totalScore {
    position: absolute;
    top: 85%;
    left: 55%;
  }

  .totalErr {
    position: absolute;
    top: 90%;
    left: 55%;
  }

  .test {
    margin: 20rpx;
  }
</style>